<template>
  <div class="about-page">
    <div class="central">
      <div class="title">
        <h1>关于我们</h1>
      </div>
      <div class="row central central-800">
        <div class="card col-lg-12 col-md-12 col-sm-12 col-sm-x-12">
          <div class="about-content animated fadeInUp">
            <div class="about-section">
              <h2>{{ aboutData.title }}</h2>
              <img :src="aboutData.aboutimg" :alt="aboutData.title" class="about-image">
              <p>{{ aboutData.info1 }}</p>
              <p>{{ aboutData.info2 }}</p>
              <p>{{ aboutData.info3 }}</p>
              <button class="btn-primary">{{ aboutData.btn1 }}</button>
              <button class="btn-secondary">{{ aboutData.btn2 }}</button>
            </div>
            
            <div class="about-section">
              <p>{{ aboutData.infox1 }}</p>
              <p>{{ aboutData.infox2 }}</p>
              <p>{{ aboutData.infox3 }}</p>
              <p>{{ aboutData.infox4 }}</p>
              <p>{{ aboutData.infox5 }}</p>
              <p>{{ aboutData.infox6 }}</p>
              <button class="btn-secondary">{{ aboutData.btnx2 }}</button>
            </div>
            
            <div class="about-section">
              <p>{{ aboutData.infof1 }}</p>
              <p>{{ aboutData.infof2 }}</p>
              <p>{{ aboutData.infof3 }}</p>
              <p>{{ aboutData.infof4 }}</p>
              <button class="btn-primary">{{ aboutData.btnf3 }}</button>
            </div>
            
            <div class="about-section">
              <p>{{ aboutData.infod1 }}</p>
              <p>{{ aboutData.infod2 }}</p>
              <p>{{ aboutData.infod3 }}</p>
              <p>{{ aboutData.infod4 }}</p>
              <p>{{ aboutData.infod5 }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apiService from '../services/api'

export default {
  name: 'AboutView',
  data() {
    return {
      aboutData: {}
    }
  },
  async mounted() {
    try {
      const response = await apiService.getAbout()
      if (response.status === 'success') {
        this.aboutData = response.data
      }
    } catch (error) {
      console.error('获取关于页面数据失败:', error)
    }
  }
}
</script>

<style scoped>
.about-page {
  padding: 2rem 0;
}

.title {
  text-align: center;
  margin-bottom: 2rem;
}

.title h1 {
  font-size: 2rem;
  color: #333;
}

.about-content {
  padding: 1.5rem;
}

.about-section {
  margin-bottom: 2rem;
}

.about-image {
  max-width: 100%;
  border-radius: 8px;
  margin: 1rem 0;
}

.about-content p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

.btn-primary, .btn-secondary {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 1rem;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}
</style>
